<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <el-dialog
    :title="dialogTitle"
    width="50%"
    top="5vh"
    :append-to-body="true"
    v-model="auditDetail.show"
  >
    <el-scrollbar style="height: 400px">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in stepInfo"
          :key="index"
          :timestamp="activity.endTime"
          :type="activity.type"
          :size="activity.size"
          placement="top"
        >
          {{ activity.taskName }}
          <p v-for="(citem, cindex) in activity.content" :key="cindex">{{ citem }}</p>
        </el-timeline-item>
      </el-timeline>
    </el-scrollbar>


  </el-dialog>
</template>

<script>


import request from '@/framework-core/axios';
import website from '@/framework-core/config/website';


export default {
  data() {
    return {
      dialogTitle: '流程审批详情',
      stepInfo: [],
      tableInfo: {
        buttonSetting: {
          allowDelete: false,
          allowView: false,
          allowEdit: false,
          allowAdd: false,
          allowRefresh: false
        },
        header: {
          title: '流程抄送记录'
        },

      }
    }
  },
  props: ['auditDetail'],
  watch: {
    'auditDetail.show'(newValue) {
      if (newValue) {
        this.getAuditDetail()

        this.mainTableReload({})
      }
    }
  },
  mounted() {
    if (!this.auditDetail.processInstanceId) {
      this.dialogTitle = '操作日志'
    }
  },
  methods: {
    getAuditDetail() {
      if (!this.auditDetail.processInstanceId) {
        return
      }
      let url = '/api/flow/flow-ext/detail'
      request
        .get(website.baseCodeApiUrl + url, {
          params: {
            processInstanceId: this.auditDetail.processInstanceId,
            formId: this.auditDetail.formId
          }
        })
        .then((response) => {
          this.stepInfo = response.data.data.data
          this.handleStepInfo(this.stepInfo)
        })
        .catch((error) => {
          this.$message.error(error.msg || error.message)
        })
    },
    handleStepInfo(stepInfo) {
      if (stepInfo instanceof Array) {
        stepInfo.forEach((element) => {
          // 有结束时间，则该环节审核已完成
          if (element.endTime) {
            element.type = 'success'
            element.content = [`执行人:${element.assigneeName}`]
           // element.content.push(`执行时间:${element.endTime}`)
            // 对表单操作数据，将数据变化展示
            if (element.modifyContent.length > 0) {
              element.modifyContent.forEach((item) => {
                // 有旧值
                if (item.executeValueOld) {
                  element.content.push(
                    `${item.executeFieldLabel}:${item.executeValueOldText}改为${item.executeValueText}`
                  )
                } else {
                  // 没有旧值
                  element.content.push(`${item.executeFieldLabel}:${item.executeValueText}`)
                }
              })
            }
          } else {
            element.size = 'large'
            element.content = [`执行人:${element.assigneeName}`]
          }
        })
      }
    },
    mainTableReload() {

    }
  }
}
</script>
<style lang='scss' scoped>
::v-deep(.el-dialog__header) {
  & > .el-dialog__title {
    color: #4ba2ff !important;
    padding-left: 35px;
  }
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #e0e4e7;
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 20px;
  }
}
::v-deep(.el-dialog__body) {
  .el-timeline{
    margin: 2px;
  }
  .el-timeline-item__tail {
    border-left: 2px solid #4da2ff;
  }
  .el-timeline-item__node {
    background-color: #0bbd87;
    border: 4px solid #7debca;
    box-sizing: content-box;
    transform: translateX(-3px);
  }
  .el-timeline-item__node--normal {
    left: -2px;
  }
  .el-timeline-item__node--success {
    width: 14px;
    height: 14px;
    background-color: #4ca1fe;
    border: none;
    transform: translateX(0);
  }
  .el-timeline-item__wrapper {
    padding-left: 58px;
    .el-timeline-item__timestamp.is-top {
      font-size: 15px;
    }
    .el-timeline-item__content {
      font-size: 18px;
      font-weight: 700;
      & > p {
        font-size: 16px;
        color: #333;
        font-weight: 400;
      }
      & > p:nth-child(1) {
        font-size: 16px;
        color: #777;
        padding-bottom: 10px;
      }
    }
  }
}
</style>
